import React, { Component } from 'react';

import { Row, Col, ConfigProvider } from 'antd';
import Divider from '@/components/DividerItem';

import Incidence from './Incidence';
import Fire from './Fire';
import TimeDistribution from './TimeDistribution';
import Categories from './Categories';

import empty from '@/assets/images/empty.png';

class Analyse extends Component<any,any> {
	customizeRenderEmpty = () => (
		<Row style={{ height: '100%', flexDirection: 'column' }} type="flex" justify="space-between">
			<Col span={24}>
				<img src={empty} height={'110px'} />
			</Col>
			<Col span={24}>暂无数据</Col>
		</Row>
	);

	render() {
		const FireC = Divider({ WrapperComponent: () => <Fire />, icon: 'line-chart', title: '警报趋势', type: 'none' });
		const IncidenceC = Divider({
			WrapperComponent: () => <Incidence />,
			icon: 'rocket',
			title: '月报警高发部位',
			type: 'none'
		});
		const TimeDistributionC = Divider({
			WrapperComponent: () => <TimeDistribution />,
			icon: 'icon-time',
			title: '报警时段分布',
			type: 'none'
		});
		const CategoriesC = Divider({
			WrapperComponent: () => <Categories />,
			icon: 'icon-time',
			title: '设备状态类别占比',
			type: 'none'
		});
	
		return (
			<ConfigProvider renderEmpty={this.customizeRenderEmpty}>
				<section style={{ height: '100%', width: '100%' }}>
					<Row style={{ height: '49%' }} gutter={18}>
						<Col span={12} style={{ height: '100%' }}>
							<CategoriesC />
						</Col>
						<Col span={12} style={{ height: '100%' }}>
							<IncidenceC />
						</Col>
					</Row>
					<Row style={{ height: '49%', marginTop: '1%' }} gutter={18}>
						<Col span={12} style={{ height: '100%' }}>
							<TimeDistributionC />
						</Col>
						<Col span={12} style={{ height: '100%' }}>
							<FireC />
						</Col>
					</Row>
				</section>
			</ConfigProvider>
		);
	}
}

export default Analyse;
